@import url('../../utils/less/base.less');

.page {
    &>.pageContainer {

        &>.top-info {
            .flex-between(center);
            .bgcolor(#2f65f5);
            padding: 32rpx 28rpx;

            &>.left {
                .flex-start(center);

                &>.avatar {
                    .radius(50%);
                    .bgimg(cover, center);
                    .bgcolor(#999);
                    .flex(none);
                    width: 120rpx;
                    height: 120rpx;
                }

                &>.user-info {
                    margin-left: 20rpx;
                    line-height: 1.6;

                    &>.name {
                        .text(32rpx, bold);
                        .flex-start(center);

                        &>.name-text {
                            margin-right: 10rpx;
                            line-height: 1;
                        }
                    }
                    &>.id {
                        .text(24rpx,bold);
                    }
                    &>.desc {
                        .text(#fff)
                    }
                }
            }

            &>.right {
                &>.right-arround {
                    width: 20rpx;
                    height: 20rpx;
                    border-top: 2px solid #666;
                    border-right: 2px solid #666;
                    transform: rotate(45deg);
                }
            }
        }

        &>.user-data {
            .bgcolor(#fff);
            .radius(10rpx);
            margin: 28rpx;

            &>.identity {
                .flex-between(center);
                padding: 30rpx 28rpx;

                &>.ident-info {
                    .flex-start(center, none);

                    &>.pmlogo {
                        width: 70rpx;
                        height: auto;
                    }

                    &>.idtext-info {
                        margin-left: 20rpx;
                        line-height: 1.6;

                        &>.id {
                            .flex-start(center);
                            .text(bold);

                            &>.qrcode {
                                margin-left: 10rpx;
                                width: 36rpx;
                                height: auto;
                            }
                        }

                        &>.need {
                            .text(#999, 24rpx);
                        }
                    }
                }

                &>.inviteBtn {
                    .radius(100rpx);
                    .bgcolor(#d88b21);
                    .text(#fff, bold, 24rpx);
                    .flex(none);
                    width: auto;
                    display: inline-block;
                    box-shadow: 0 10rpx 10rpx 0rpx #999;
                    padding: 16rpx 18rpx;
                }
            }

            &>.invite-data {
                .flex-between();
                padding: 0 28rpx 12rpx;

                &>.item {
                    .flex-start(col, center);

                    &>.title {}

                    &>.num {
                        .text(24rpx, #d62404);
                        margin-top: 16rpx;
                    }

                    &>.reality {
                        .text(24rpx, #999);
                        margin-top: 16rpx;
                    }
                }
            }

            &>.identityVer {
                padding-bottom: 12rpx;

                &>.swiper {
                    height: 60rpx;

                    & .swiper-item {
                        .flex-between(center);
                        box-sizing: border-box;
                        padding: 0 28rpx;

                        &>.title {
                            .flex-start(center, auto);
                            .text(#38a4dc, 24rpx);
                            .overflow-hidden();

                            &>.icon {
                                .flex(none);
                                width: 34rpx;
                                height: auto;
                                margin-right: 12rpx;
                            }

                            &>.title-text {
                                .flex(auto);
                                .text-overflow(1);
                            }
                        }

                        &>.right-arround {
                            .flex(none);
                            transform: rotate(45deg);
                            border-top: 4rpx solid #666;
                            border-right: 4rpx solid #666;
                            width: 14rpx;
                            height: 14rpx;
                        }
                    }
                }
            }
        }

        &>.banner {
            padding: 0 28rpx;

            &>.swiper {
                .radius(10rpx);
                .overflow-hidden();
                height: 300rpx;

                & .swiper-item {
                    .bgimg(cover, center);
                }
            }
        }

        &>.rank {
            .bgcolor(#fff);
            .radius(10rpx);
            .overflow-auto();
            margin: 28rpx;

            &>.title {
                .text(32rpx);
                padding: 24rpx;
            }

            &>.container {
                .flex-start();
                .bgcolor(#f3f5f9);
                .radius(10rpx);
                margin: 0 20rpx 20rpx;

                &>.item {
                    .flex-start(auto, center, col);

                    &>.line-1 {
                        .text(30rpx);
                        margin-top: 18rpx;
                    }

                    &>.line-2 {
                        .text(30rpx);
                        margin: 10rpx 0;
                    }

                    &>.item-info {
                        .bgcolor(#fff);
                        .radius(10rpx);
                        padding: 14rpx 0;
                        margin-bottom: 18rpx;
                        width: calc(100% - 40rpx);

                        &>.col {
                            .flex-between(center);
                            padding: 14rpx 20rpx;

                            &>.item {}
                        }
                    }
                }
            }
        }

        &>.trade {
            .bgcolor(#fff);
            .radius(10rpx);
            .overflow-auto();
            margin: 28rpx;

            &>.title {
                .text(32rpx);
                .flex-start(baseline);
                padding: 24rpx;
                &>.desc {
                    .text(28rpx,#999);
                }
            }
            &>.content {
                .text(center);
                display: table;
                width: calc(100% - 20rpx);
                margin: 0 10rpx;
                &>.th {
                    .bgcolor(#ccc);
                    display: table-row;
                    &>.td {
                        display: table-cell;
                        padding: 10rpx 0;
                    }
                }
               
                &>.tr {
                    display: table-row;
                    &>.td {
                        display: table-cell;
                        padding: 10rpx 0;
                        vertical-align: middle;
                        &>.name {
                            .flex-center(center);
                            &>.icon {
                                margin-left: 10rpx;
                                width: 30rpx;
                                height: auto;
                            }
                        }
                        &>.uid {
                            margin-top: 10rpx;
                        }
                    }
                }
            }
            &>.status {
                .bgcolor(#fff);
                .text(center, #999);
                width: 100%;
                padding: 20rpx 0;
            }
        }
    }

    &>.tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    &>.popup {
        .bgcolor(rgba(0, 0, 0, .7));
        .fixed(0, 0, 0, 0);
        .flex-center(center);
        z-index: 2;
        transition: all .25s;

        &>.container {
            .bgcolor(white);
            .radius(16rpx);
            .overflow-hidden();
            .flex-center(center, col);
            width: 80vw;
            padding: 30rpx 0;
            transition: all .25s;
            &>.title {
               .text(32rpx, #888);
               line-height: 1.4;
            }
            &>.qrcode {
                width: 300rpx;
                height: auto;
                margin: 30rpx 0 20rpx;
            }
        }
    }
}